<template>
  <div class="progress-container">
    <el-progress 
      :percentage="percentage" 
      :status="isCompleted ? 'success' : ''"
      :stroke-width="20"
      :format="formatPercentage"
    ></el-progress>
    <div class="progress-info">
      <span class="progress-text">{{ progressText }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProgressBar',
  props: {
    current: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    text: {
      type: String,
      default: '完成进度'
    }
  },
  computed: {
    percentage() {
      if (this.total === 0) return 0
      return Math.round((this.current / this.total) * 100)
    },
    isCompleted() {
      return this.percentage === 100
    },
    progressText() {
      return `${this.text}：${this.current}/${this.total}`
    }
  },
  methods: {
    formatPercentage(percentage) {
      return `${percentage}%`
    }
  }
}
</script>

<style scoped>
.progress-container {
  width: 100%;
  margin: 16px 0;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: #666;
  font-size: 14px;
}

.progress-text {
  font-weight: 500;
}
</style>